<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>this&nbsp;is&nbsp;a&nbsp;web</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!-- 头部部分开始start -->
       <div class="nav">
        <div class="nav-l fl">
            <a href="https://www.yuque.com" target="_black">
                <img src="images/queque.png">
                <span>语&nbsp;雀</span>
            </a>
        </div>
        <div class="nav-c fl">
            <div class="nav-c-search">
            <button></button> <input type="text" placeholder='Search'>
        </div>
        <div class="nav-c-found">
            <ul>
                <li id="work"> Dashboard</li>
                <li><a href="#">Organization</a></li>
                <li><a href="#"> Explore</a></li>
                <li><a href="#">Help</a></li>
            </ul>    
        </div>
        </div>
        <div class="nav-r fr">
            <div class="icon1">
                <img src="images/shi.jpg" alt="">
            </div>
            <div class="icon3">
                <img src="images/laba.jpg" alt="">
            </div>
            <div class="icon4">
                <img src="images/touxiang.png" alt="" width="24px" height="24px">
            </div>
        </div>
        </div>
    <!-- 头部部分结束end -->
    <!-- 主体部分开始start -->
    <div class="bac">
     <div class="content">
         <!-- 主体左侧部分开始start -->
         <div class="content-l">
             <div class="content-l-top">
             <ul>
                 <li> <a href="#"><img src="images/1.png" alt="">Dashboard</a></li>
                 <li><a href="#"></a></li>
                 <li> <a href="#"><img src="images/2.png" alt="">Documents</a> </li>
                 <li> <a href="#"><img src="images/3.png" alt="">Repositories</a></li>
                 <li> <a href="#"><img src="images/4.png" alt="">Group</a></li>
             </ul>
            </div>
             <div class="content-l-bottom">
                 <ul>
                     <li><a href="#"><img src="images/8.png" alt="">合作</a></li>
                     <li><a href="#"><img src="images/5.png" alt="">Topics</a></li>
                     <li><a href="#"><img src="images/6.png" alt="">Follows</a></li>
                     <li><a href="#"><img src="images/7.png" alt="">Collections</a></li>
                     <li><a href="#"></a></li>
                     <li><a href="#"><img src="images/9.png" alt="">Recycles</a></li>
                 </ul>  
             </div>
         </div>
         <!-- 主体左侧部分结束end -->
         <!-- 主体中间部分开始start -->
         <div class="content-c">
             <div class="content-c-top">
                 <div class="content-c-top-text">
                     <span>Recent edited</span>
                     <div class="newdoc">New document</div>
                 </div>
                 <div class="content-c-top-doc ">
                     <div class="content-box">
                         <img src="images/xiao.png" alt="">
                         <div class="word"> 
                         <span>Git</span><br>Leechar/I'm a pig &nbsp;Today14:46
                        </div>   
                     </div>
                     <div class="content-box">
                            <img src="images/xiao.png" alt="">
                            <div class="word"> 
                                    <span>Vscode</span><br>Leechar/I'm a pig &nbsp;Today14:46
                                   </div>   
                     </div>
                     <div class="content-box">
                            <img src="images/xiao.png" alt="">
                            <div class="word"> 
                                    <span>No title</span><br>Leechar/Job log &nbsp;Today03:46
                                   </div>   
                     </div>
                     <div class="content-box">
                            <img src="images/xiao.png" alt="">
                            <div class="word"> 
                                    <span>weekly</span><br>Leechar/Job log &nbsp;Today03:35
                                   </div>   
                     </div>
                     <div class="content-box">
                            <img src="images/xiao.png" alt="">
                            <div class="word"> 
                                    <span>Daily.</span><br>Leechar/Job log &nbsp;Today03:35
                                   </div>   
                     </div>
                 </div>
             </div>
             <div class="content-c-top">
                    <div class="content-c-top-text">
                        <span>Recently participated knowledge base</span>
                        <div class="newdoc">New knowledge base</div>
                    </div>
                    <div class="content-c-top-doc">
                        <div class="content-box">
                            <img src="images/xiao.png" alt="">
                            <div class="word"> 
                                    <span>Default knowledge base</span><br>This is a knowledge base
                                   </div>   
                        </div>
                        <div class="content-box">
                               <img src="images/xiao.png" alt="">
                               <div class="word"> 
                                    <span>In days of yore</span><br>Lu xun's article
                                   </div>   
                        </div>
                        <div class="content-box">
                               <img src="images/xiao.png" alt="">
                               <div class="word"> 
                                    <span>Just me</span><br>East don't hurt
                                   </div>   
                        </div>
                        <div class="content-box">
                               <img src="images/xiao.png" alt="">
                               <div class="word"> 
                                    <span>Sun alkaloids</span><br>Ming religion advocates no taboo
                                   </div>   
                        </div>
                        <div class="content-box">
                               <img src="images/xiao.png" alt="">
                               <div class="word"> 
                                    <span>Javascrip</span><br>This is a programming language
                                   </div>   
                        </div>
                    </div>
                </div>
         </div>
         <!-- 主体中间部分结束end -->
         <!-- 主体右半部分开始start -->
         <div class="content-r fr">
            <div class="content-r-first">
                <span>My team</span>
                <div class="team">New group</div>
            </div>
            <div class="content-r-second">
             There's no team. Go<a href="#">New group</a>!
            </div>
            <p>Today's recommendation</p>
            <div class="content-r-pic">
                <img src="images/travl.png" alt="">
                <span>Hangzhou travel atlas</span>
            </div>
            <ul>
                <li><a href="index.html">中文</a></li>       
                <li><a href="https://www.yuque.com/yuque/help/about" target="_black"> About Yuque</a></li>
                <li><a href="https://www.yuque.com/yuque/blog" target="_black"> Yuque in sky</a></li>
                <li><a href="https://www.yuque.com/yuque/help" target="_black">The manual</a></li>
                <li><a href="https://www.yuque.com/yuque/topics" target="_black"> Feedback</a></li>
                <li><a href="https://www.yuque.com/yuque/developer" target="_black"> Developer</a></li>
                <li><a href="https://www.yuque.com/terms" target="_black"> Terms</a></li>
            </ul>
         </div>
         <!-- 主体右半部分结束end -->
     </div></div>
    <!-- 主体部分结束end -->
    
</body>
</html>